import React, { useEffect, useState } from 'react'
import { Menu } from 'antd';
import { Link, useNavigate } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
import { setCurrentPageName } from '../../store/home/homeSlice'


export default function Sider() {
  const navigate = useNavigate()
  const state = useSelector(state => state)
  const dispatch = useDispatch()
  const routes = state.menuNav.routes
  const items = []
  let defaultName = ''
  let currentName = ''

  // 设置items
  state.menuNav.sideNav.map(item => {
    if (item.children && item.children.length > 0) {
      items.push({
        key: item.id,
        label: item.menuName,
        children: (() => {
          return item.children.map(chilItem => {
            return {
              key: chilItem.id,
              label: <Link to={chilItem.pathRoute}>{chilItem.menuName}</Link>
            }
          })
        })()
      })
    } else {
      items.push({
        key: item.id,
        label: item.menuName
      })
    }

  })
  useEffect(() => {
    // 设置items
    state.menuNav.sideNav.map(item => {
      if (item.children && item.children.length > 0) {
        items.push({
          key: item.id,
          label: item.menuName,
          children: (() => {
            return item.children.map(chilItem => {
              return {
                key: chilItem.id,
                label: <Link to={chilItem.pathRoute}>{chilItem.menuName}</Link>
              }
            })
          })()
        })
      } else {
        items.push({
          key: item.id,
          label: item.menuName
        })
      }

    })


  }, [])
  defaultName = items[0] ? items[0].label : ''
  // console.log(defaultName);

  function bindMenu(menuList) {
    let arr = []
    menuList.map(item => {
      if (item.children && item.children.length > 0) {
        arr.push({
          key: item.id,
          label: item.menuName,
          children: [...bindMenu(item.children)]
        })
      } else {
        arr.push({
          key: item.id,
          label: <Link to={item.menuUrl}>{item.menuName}</Link>
        })
      }
    })
    return arr
  }


  // 默认key
  const [defaultKey, setDefaultKey] = useState({ selected: [''], open: [''] })
  // 当前key
  const [currentKey, setCurrentKey] = useState({ selected: [''], open: [''] })
  const defaultNav = state.menuNav.defaultSideNav

  function currentNav(arr, id) {
    let newArr = []
    let temp = ''
    arr.map((item) => {
      temp = item[0].key + ''
      if (temp[0] === id) {
        newArr.push(...item)
      }
    })
    return newArr
  }

  useEffect(() => {
    // console.log(items);
    setDefaultKey(defaultNav)
    setCurrentKey({ ...defaultNav })

    if (routes.length > 0 && defaultNav.selected) {
      for (let i = 0; i < routes.length; i++) {
        for (let j = 0; j < defaultNav.selected.length; j++) {
          if ((routes[i].id + '') === (defaultNav.selected[j])) {
            dispatch(setCurrentPageName(routes[i].id))
            // navigate(routes[i].path)
          }
        }
      }
    }

  }, [state.menuNav.currentTopNav])




  // console.log('------SideMenu-------');

  return (
    <>
      <Menu
        theme="dark"
        mode="inline"
        // defaultOpenKeys={['11']}
        // defaultSelectedKeys={['111']}
        // defaultSelectedKeys={[defaultKey.selected]}
        // openKeys={currentKey.open}
        // selectedKeys={currentKey.selected}
        onOpenChange={(openKeys) => {
          setCurrentKey({ ...currentKey, open: [...openKeys] })

        }}
        onSelect={(selectKeys) => {
          for (let i = 0; i < currentKey.open.length; i++) {
            if (selectKeys.keyPath[1][0] === currentKey.open[i][0]) {
              const temp = [...currentKey.selected]
              for (let j = 0; j < temp.length; j++) {
                if (selectKeys.key[0] === temp[j][0]) {
                  dispatch(setCurrentPageName(selectKeys.key))
                  // console.log();
                  temp[j] = selectKeys.key
                  break
                }
              }
              setCurrentKey({ ...currentKey, selected: temp })
            }
          }

        }}
        items={items}
        style={{
          height: '100%',
          borderRight: 0,
          borderTop: '1px solid #f0f2f5'
        }}
      />
    </>
  )
}
